<!DOCTYPE html>
<html lang="{{ get_locale() }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ _('包裹管理系统') }}</title>
    <!-- 本地编译的 Tailwind CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
    <!-- Alpine.js CDN -->
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <style>
        [x-cloak] { display: none !important; }
        
        .tab-active {
            border-color: #3b82f6;
            color: #3b82f6;
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <header class="bg-white shadow">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <div class="flex justify-between items-center">
                <h1 class="text-2xl font-bold text-gray-900">{{ _('包裹管理系统') }}</h1>
                <div class="flex items-center space-x-4">
                    <div class="text-sm text-gray-500">
                        <span id="current-time"></span>
                    </div>
                    <div class="relative">
                        <select id="language-selector" class="appearance-none bg-white border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" 
                                x-data="{ 
                                    lang: '{{ get_locale() }}',
                                    init() {
                                        console.log('Current locale:', this.lang);
                                    },
                                    changeLang(event) {
                                        console.log('Changing language to:', event.target.value);
                                        const url = new URL(window.location);
                                        url.searchParams.set('lang', event.target.value);
                                        window.location.replace(url.toString());
                                    }
                                }" 
                                x-model="lang" 
                                @change="changeLang($event)">
                            {% for code, name in LANGUAGES.items() %}
                            <option value="{{ code }}" {% if code == get_locale() %}selected{% endif %}>{{ name }}</option>
                            {% endfor %}
                        </select>
                        <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {% block content %}{% endblock %}
    </main>
    
    <footer class="bg-white shadow mt-8 py-4">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <p class="text-center text-sm text-gray-500">
                &copy; 2025 {{ _('包裹管理系统') }} | {{ _('版本') }} 1.0.0
            </p>
        </div>
    </footer>
    
    <!-- 音效元素 -->
    <audio id="successSound" preload="auto">
        <source src="data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tAwAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAAFWgD///////////////////////////////////////////////////////////////////8AAAA8TEFNRTMuMTAwAc0AAAAAAAAAABSAJAJAQgAAgAAAAVrZYrUBAAAAAAAAAAAAAAAAAAAA" type="audio/mpeg">
    </audio>
    <audio id="errorSound" preload="auto">
        <source src="data:audio/mpeg;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA//tAwAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAAFWgD///////////////////////////////////////////////////////////////////8AAAA8TEFNRTMuMTAwAc0AAAAAAAAAABSAJAJAQgAAgAAAAVrZYrUBAAAAAAAAAAAAAAAAAAAA" type="audio/mpeg">
    </audio>
    
    <!-- 自定义脚本 -->
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
    <script>
        // 显示当前时间
        function updateTime() {
            const now = new Date();
            const options = { 
                year: 'numeric', 
                month: '2-digit', 
                day: '2-digit', 
                hour: '2-digit', 
                minute: '2-digit', 
                second: '2-digit',
                hour12: false
            };
            const locale = document.documentElement.lang || 'zh';
            document.getElementById('current-time').textContent = now.toLocaleString(locale, options);
        }
        
        // 初始更新时间
        updateTime();
        
        // 每秒更新时间
        setInterval(updateTime, 1000);
    </script>
</body>
</html>
